﻿const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);

export const elements = {
  canvas: $('#drawingCanvas'),
  gridCanvas: $('#gridCanvas'),
  baseCanvas: $('#baseCanvas'),
  stage: $('#canvasStage'),
  canvasViewport: $('#canvasViewport'),
  canvasWrapper: $('#canvasWrapper'),
  ctx: $('#drawingCanvas')?.getContext('2d') ?? null,
  gridCtx: $('#gridCanvas')?.getContext('2d') ?? null,
  baseCtx: $('#baseCanvas')?.getContext('2d') ?? null,
  importBaseBtn: $('#importBaseBtn'),
  clearBaseBtn: $('#clearBaseBtn'),
  toggleReferenceBtn: $('#toggleReferenceBtn'),
  exportBtn: $('[data-role="export"]'),
  exportHighlightBtn: $('#exportHighlightBtn'),
  importProjectBtn: $('#importProjectBtn'),
  createCanvasBtn: $('#createCanvasBtn'),
  toolPencilBtn: $('#toolPencilBtn'),
  toolBucketBtn: $('#toolBucketBtn'),
  toolEyedropperBtn: $('#toolEyedropperBtn'),
  toolSelectionBtn: $('#toolSelectionBtn'),
  flipHorizontalBtn: $('#flipHorizontalBtn'),
  flipVerticalBtn: $('#flipVerticalBtn'),
  rotateClockwiseBtn: $('#rotateClockwiseBtn'),
  rotateCounterclockwiseBtn: $('#rotateCounterclockwiseBtn'),
  baseImageInput: $('#baseImageInput'),
  widthInput: $('#widthInput'),
  heightInput: $('#heightInput'),
  resolutionInput: $('#resolutionInput'),
  zoomRange: $('#zoomRange'),
  zoomValue: $('#zoomRangeValue'),
  autoSnapToggle: $('#autoSnapToggle'),
  showCodesToggle: $('#showCodesToggle'),
  displayModeToast: $('#displayModeToast'),
  displayModeRadios: $$('input[name="canvasDisplayMode"]'),
  pixelShapeRadios: $$('input[name="pixelShape"]'),
  axisOpacityRange: $('#axisOpacityRange'),
  axisOpacityValue: $('#axisOpacityValue'),
  canvasOpacityRange: $('#canvasOpacityRange'),
  gridBoldXToggle: $('#gridBoldXToggle'),
  gridBoldYToggle: $('#gridBoldYToggle'),
  gridBoldXInterval: $('#gridBoldXInterval'),
  gridBoldYInterval: $('#gridBoldYInterval'),
  gridXStart: $('#gridXStart'),
  gridYStart: $('#gridYStart'),
  baseLayerSelect: $('#baseLayerSelect'),
  baseScaleRange: $('#baseScaleRange'),
  baseScaleInput: $('#baseScaleInput'),
  resizeCanvasBtn: $('#resizeCanvasBtn'),
  resizeCanvasOverlay: $('#resizeCanvasOverlay'),
  resizeCloseBtn: $('#resizeCloseBtn'),
  resizeModeExpandBtn: $('#resizeModeExpandBtn'),
  resizeModeCropBtn: $('#resizeModeCropBtn'),
  resizeEditButtons: $$('.resize-edit-btn'),
  resizeEditValues: $$('.resize-edit-value'),
  resizePreviewStage: $('#resizePreviewStage'),
  resizePreviewWrapper: $('#resizePreviewWrapper'),
  resizePreviewDrawingCanvas: $('#resizePreviewDrawingCanvas'),
  resizeCurrentSize: $('#resizeCurrentSize'),
  resizeResultSize: $('#resizeResultSize'),
  resizeMessage: $('#resizeMessage'),
  resizeConfirmBtn: $('#resizeConfirmBtn'),
  resizeCancelBtn: $('#resizeCancelBtn'),
  toggleBaseEditBtn: $('#toggleBaseEditBtn'),
  recenterBaseBtn: $('#recenterBaseBtn'),
  snapBaseToCanvasBtn: $('#snapBaseToCanvasBtn'),
  paletteContainer: $('#paletteContainer'),
  paletteFilter: $('#paletteFilter'),
  paletteNormalContainer: $('#paletteNormalContainer'),
  paletteSpecialContainer: $('#paletteSpecialContainer'),
  paletteNormalCount: $('#paletteNormalCount'),
  paletteSpecialCount: $('#paletteSpecialCount'),
  paletteTabButtons: $$('[data-palette-tab]'),
  paletteTabPanels: $$('[data-palette-panel]'),
  paletteSpecialFilterButtons: $$('[data-special-filter]'),
  currentColorInfo: $('#currentColorInfo'),
  currentColorSwatch: $('#currentColorSwatch'),
  currentColorCode: $('#currentColorCode'),
  currentColorRgb: $('#currentColorRgb'),
  currentColorType: $('#currentColorType'),
  paletteHistorySelect: $('#paletteHistorySelect'),
  loadDefaultPaletteBtn: $('#loadDefaultPaletteBtn'),
  importPaletteBtn: $('#importPaletteBtn'),
  deletePaletteBtn: $('#deletePaletteBtn'),
  createPaletteBtn: $('#createPaletteBtn'),
  paletteFileInput: $('#paletteFileInput'),
  paletteWindowToggleBtn: $('#paletteWindowToggleBtn'),
  paletteWindow: $('#paletteWindow'),
  paletteWindowHeader: $('#paletteWindowHeader'),
  paletteWindowCloseBtn: $('#paletteWindowCloseBtn'),
  paletteWindowResizer: $('#paletteWindowResizer'),
  canvasHighlightBtn: $('#canvasHighlightBtn'),
  projectFileInput: $('#projectFileInput'),
  statusSize: $('#statusSize'),
  statusPalette: $('#statusPalette'),
  statusCreated: $('#statusCreated'),
  statusColorPreview: $('#statusColorPreview'),
  statusColorCode: $('#statusColorCode'),
  statusColorHex: $('#statusColorHex'),
  statusColorRgb: $('#statusColorRgb'),
  canvasOpacityValue: $('#canvasOpacityValue'),
  baseScaleValue: $('#baseScaleValue'),
  referenceWindow: $('#referenceWindow'),
  updateWindow: $('#updateWindow'),
  exportWindow: $('#exportWindow'),
  referenceList: $('#referenceList'),
  referenceHeader: $('#referenceHeader'),
  referenceAddBtn: $('#referenceAddBtn'),
  referenceMinimizeBtn: $('#referenceMinimizeBtn'),
  referenceCloseBtn: $('#referenceCloseBtn'),
  referenceResizer: $('#referenceResizer'),
  referenceImageInput: $('#referenceImageInput'),
  docsLink: $('#docsLink'),
  updateCloseBtn: $('#updateCloseBtn'),
  updateManualBtn: $('#updateManualBtn'),
  focusFullscreenBtn: $('#focusFullscreenBtn'),
  focusSimpleModeBtn: $('#focusSimpleModeBtn'),
  exportCloseBtn: $('#exportCloseBtn'),
  exportCancelBtn: $('#exportCancelBtn'),
  exportConfirmBtn: $('#exportConfirmBtn'),
  exportPreviewCanvas: $('#exportPreviewCanvas'),
  resetPreviewViewBtn: $('#resetPreviewView'),
  exportBackgroundColor: $('#exportBackgroundColor'),
  exportFilename: $('#exportFilename'),
  colorManageBtn: $('#colorManageBtn'),
  colorManageWindow: $('#colorManageWindow'),
  colorManageCloseBtn: $('#colorManageCloseBtn'),
  colorManageCancelBtn: $('#colorManageCancelBtn'),
  colorManageConfirmBtn: $('#colorManageConfirmBtn'),
  colorManageSearchInput: $('#colorManageSearch'),
  selectAllColorsBtn: $('#selectAllColorsBtn'),
  deselectAllColorsBtn: $('#deselectAllColorsBtn'),
  colorManageList: $('#colorManageList'),
  colorManageMessage: $('#colorManageMessage'),
  enabledColorCount: $('#enabledColorCount'),
  canvasHighlightWindow: $('#canvasHighlightWindow'),
  canvasHighlightCloseBtn: $('#canvasHighlightCloseBtn'),
  canvasHighlightSelectAllBtn: $('#canvasHighlightSelectAll'),
  canvasHighlightDeselectAllBtn: $('#canvasHighlightDeselectAll'),
  canvasHighlightList: $('#highlightOverlayList'),
  canvasHighlightFilter: $('#canvasHighlightFilter'),
  canvasHighlightMessage: $('#canvasHighlightMessage'),
  canvasHighlightReplaceBtn: $('#canvasHighlightReplaceBtn'),
  canvasHighlightReplacementPanel: $('#canvasHighlightReplacementPanel'),
  canvasHighlightReplacementCloseBtn: $('#canvasHighlightReplacementCloseBtn'),
  canvasHighlightReplacementConfirmBtn: $('#canvasHighlightReplacementConfirmBtn'),
  canvasHighlightReplacementFilter: $('#canvasHighlightReplacementFilter'),
  canvasHighlightReplacementList: $('#canvasHighlightReplacementList'),
  canvasHighlightReplacementTitle: $('#canvasHighlightReplacementTitle'),
  canvasHighlightReplacementHint: $('#canvasHighlightReplacementHint'),
  canvasHighlightReplacementSourceCount: $('#canvasHighlightReplacementSourceCount'),
  paletteSwitchOverlay: $('#paletteSwitchOverlay'),
  paletteSwitchCloseBtn: $('#paletteSwitchCloseBtn'),
  paletteSwitchCancelBtn: $('#paletteSwitchCancelBtn'),
  paletteSwitchConvertBtn: $('#paletteSwitchConvertBtn'),
  paletteSwitchResetBtn: $('#paletteSwitchResetBtn'),
  paletteSwitchName: $('#paletteSwitchName'),
  paletteSwitchWarning: $('#paletteSwitchWarning'),
  paletteSwitchSummary: $('#paletteSwitchSummary'),
  projectImportOverlay: $('#projectImportOverlay'),
  projectImportConfirmBtn: $('#projectImportConfirmBtn'),
  projectImportCancelBtn: $('#projectImportCancelBtn'),
  canvasSizeWarning: $('#canvasSizeWarning'),
  selectionMaskCanvas: $('#selectionMaskCanvas'),
  selectionContentCanvas: $('#selectionContentCanvas'),
  selectionOutlineCanvas: $('#selectionOutlineCanvas'),
  selectionMaskCtx: $('#selectionMaskCanvas')?.getContext('2d') ?? null,
  selectionContentCtx: $('#selectionContentCanvas')?.getContext('2d') ?? null,
  selectionOutlineCtx: $('#selectionOutlineCanvas')?.getContext('2d') ?? null,
  panelButtons: $$('[data-role="panel"]'),
  panelCloseButtons: $$('[data-panel-close]'),
  toolButtons: $$('[data-role="tool"]'),
  toolPanels: $$('.tool-panel'),
  symmetryButtons: $$('[data-symmetry-mode]'),
  simpleToolbar: $('#simpleToolbar'),
  simplePaletteWindowBtn: $('#simplePaletteWindowBtn'),
  simpleModeExitBtn: $('#simpleModeExitBtn'),
  photoSketchBtn: $('#photoSketchBtn'),
  photoSketchOverlay: $('#photoSketchOverlay'),
  photoSketchCloseBtn: $('#photoSketchCloseBtn'),
  photoSketchCancelBtn: $('#photoSketchCancelBtn'),
  photoSketchCreateBtn: $('#photoSketchCreateBtn'),
  photoSketchExportBtn: $('#photoSketchExportBtn'),
  photoSketchImageBtn: $('#photoSketchImageBtn'),
  photoSketchFileInput: $('#photoSketchFileInput'),
  photoSketchFileName: $('#photoSketchFileName'),
  photoSketchScaleRange: $('#photoSketchScaleRange'),
  photoSketchScaleValue: $('#photoSketchScaleValue'),
  photoSketchAlignSelect: $('#photoSketchAlignSelect'),
  photoSketchOffsetX: $('#photoSketchOffsetX'),
  photoSketchOffsetY: $('#photoSketchOffsetY'),
  photoSketchOffsetXInput: $('#photoSketchOffsetXInput'),
  photoSketchOffsetYInput: $('#photoSketchOffsetYInput'),
  photoSketchAspectReset: $('#photoSketchAspectReset'),
  photoSketchCropLock: $('#photoSketchCropLock'),
  photoSketchCropWidth: $('#photoSketchCropWidth'),
  photoSketchCropHeight: $('#photoSketchCropHeight'),
  photoSketchPaletteSelect: $('#photoSketchPaletteSelect'),
  photoSketchPixelRatio: $('#photoSketchPixelRatio'),
  photoSketchSummary: $('#photoSketchSummary'),
  photoSketchOriginalPreview: $('#photoSketchOriginalPreview'),
  photoSketchPixelPreview: $('#photoSketchPixelPreview'),
  photoSketchPreviewInfo: $('#photoSketchPreviewInfo'),
  photoSketchStatus: $('#photoSketchStatus'),
  photoSketchDitherRadios: $$('input[name="photoSketchDither"]')
};


